<template>
    <div>
        <h1>薪资：{{ salary }}</h1>
        <h2>工龄：{{ info.workAge }}
            <button @click="info.workAge++">点击增加工龄</button>
        </h2>
        <h3>等级：{{ info.title.lev }}
            <button @click="updeteLev">点击提升等级</button>
        </h3>

        <hr>
        <h2>{{ num1 }} <button @click="num1++">自增</button></h2>
        <h2>{{ num2 }} <button @click="num2++">自增</button></h2>
        <h2>{{ number }}</h2>



    </div>

</template>
<script setup>
import { watchEffect, ref, reactive } from 'vue';

const salary = ref(10)
const num1 = ref(10)
const num2 = ref(20)
const number = ref(30)

const info = reactive(
    {
        workAge: 0,
        title: {
            name: '教授',
            lev: 1
        }
    }
)

// 更新info数据
function updeteLev() {
    info.title.lev++
}

  const a = watchEffect(()=>{
    salary.value=10+info.workAge*0.1+(info.title.lev-1)*0.5

    number.value= num1.value + num2.value
},{deep:true})

setInterval(()=>{
    a()
},5000)



</script>